<template>
	<view class="w-100">
		<view class="head-style pb-3 border-bottom">
			<view class="flex-1" :style="'height:' + statusBarHeight + 'px;'"></view>
			<view class="flex-1 row-ac">
				<view class="ml-3 font-s-35 mt-3 row-ac" @click="toBack"><text class="iconfont icon-back2-01"></text>返回</view>
				<view class="flex-1 row font-s-5 font-w">帖子发布</view>
				<view class="mr-3 font-s-35 mt-2 release-box row" @click="takeRelease"
					:class="releaseState == true ? 'bg-color' : 'bg-light-muted'">发布</view>
			</view>
		</view>
		<view class="flex-1 mx-3 mt-3">
			<view class="flex-1 row-ac mt-2">
				<!-- <view class="row-ac ml-4 flex-1">
					<view class="iconfont icon-huati"></view>
					<view class="font-s-35 ml-2">选择话题</view>
				</view>
				<view class="row-ac text-muted">
					<view class="font-s-3">合适的话题会得到更多赞哟</view>
					<view class="iconfont icon-next-01 mr-2" style="font-size: 26rpx;"></view>
				</view> -->
			</view>
			<view class="flex-1 py-1 mt-3" style="background-color: #f9f9f9;">
				<input type="text" class="py-1 px-2" v-model="form.title" placeholder="有标题会获得更多青睐哟" />
			</view>
			<view class="flex-1 py-1 mt-3">
				<textarea type="text" class="p-2" maxlength="-1" v-model="form.content" placeholder="有趣的灵魂和有趣的内容"
					@input="handleTextareaInput"></textarea>
			</view>
		</view>
		<view class="flex-1 fixed-bottom bg-white">
			<view class="flex-1 mx-3 py-3 row-ac-fw">
				<view class="image-box row" v-for="(item,index) in form.image_list" :key="index">
					<image :src="item.url" mode=""></image>
				</view>
				<view class="image-box row" @tap="handleImageUpload">
					<text class="iconfont icon-jiahao text-white" style="font-size: 18px;"></text>
				</view>
			</view>
		</view>
		<leson-popup :popupStatu="lesonpopup" @statusChanged="handleStatusChanged" style="z-index: 9999;">
			<view class="flex-1 py-2 mx-3">
				<scroll-view scroll-x class="scroll-row">
					<view class="scroll-row-item" v-for="(item,index) in friendsList" :key="index"
						@click="takeUser(item)">
						<view class="row-a-j-fc user-box">
							<image :src="item.fans_headimg" mode=""></image>
							<view class="font-s-3 mt-1">{{ item.fans_nickname || item.fans_name }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="flex-1" :style="'height:' + tabBarHeight + 'px;'"></view>
		</leson-popup>
		<view class="flex-1" :style="'height:' + tabBarHeight + 'px;'"></view>
	</view>
</template>

<script>
	import {
		articleCreateUrl
	} from '@/api/article.js';
	import {
		friendsListUrl,
		imagesUploadUrl
	} from '@/api/index.js'
	import request from '@/utils/request'
	import lesonPopup from "@/components/common/leson-popup"
	export default {
		components: {
			lesonPopup
		},
		data() {
			return {
				statusBarHeight: '',
				tabBarHeight: '',
				form: {
					title: '',
					content: '',
					category: '',
					image_list: ''
				},
				lesonpopup: false,
				friendsList: []
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('token')
			if (this.token != '') {
				this.getFriendsList()
			}
		},
		computed: {
			releaseState() {
				if (this.form.content !== '') {
					return true
				} else {
					return false
				}
			}
		},
		created() {
			this.$getScreenInfo().then(res => {
				this.statusBarHeight = res.statusBarHeight
				this.tabBarHeight = res.tabBarHeight
				console.log(this.tabBarHeight);
			})
		},
		methods: {
			getFriendsList() {
				this.$R.get(friendsListUrl).then(res => {
					if (res.code == 200) {
						this.friendsList = res.data.list
						console.log(this.friendsList);
					}
				})
			},
			takeRelease() {
				if (this.form.title === '' && this.form.content === '' && this.form.image_list === '') {
					uni.showToast({
						title: '请输入帖子内容',
						icon: 'none'
					});
				} else {
					this.errorMsg = '';
					this.$R.post(articleCreateUrl, this.form).then(res => {
						if (res.code == 200) {
							this.form.title = ''
							this.form.content = ''
							this.form.image_list = ''
							uni.showToast({
								title: '发表成功',
								icon: 'none'
							});
						}
					});
				}
			},
			handleTextareaInput() {
				const content = this.form.content;
				const lastIndex = content.lastIndexOf("@");
				if (content.includes("@") && lastIndex === content.length - 1) {
					this.lesonpopup = true;
				}
			},
			takeUser(item) {
				const content = this.form.content;
				if (content.includes("@")) {
					const atIndex = content.lastIndexOf("@");
					if (item.fans_nickname) {
						this.form.content = content.substring(0, atIndex) + "@" + item.fans_nickname + " ";
					} else {
						this.form.content = content.substring(0, atIndex) + "@" + item.fans_name + " ";
					}

				}
			},
			handleStatusChanged(newVal) {
				this.lesonpopup = newVal
			},
			handleImageUpload() {
				this.form.image_list = []; // 初始化为一个空数组
				uni.chooseImage({
					count: 9,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: request.baseUrl + imagesUploadUrl,
								filePath: tempFilePaths[i],
								name: 'file',
								header: {
									'Authorization': 'Bearer ' + uni.getStorageSync('token')
								},
								success: (uploadRes) => {
									const data = JSON.parse(uploadRes.data);
									if (data.code === 200) {
										const url = data.data.url;
										this.form.image_list.push({
											"url": url
										});
										console.log(this.form.image_list);
									} else {
										console.error('上传失败');
									}
								},
								fail: (error) => {
									console.error('上传失败', error);
								}
							});
						}
					}
				});
			},
			toBack(){
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.release-box {
		width: 120rpx;
		height: 56rpx;
		border-radius: 6rpx;
		color: #fff;
	}

	.icon-huati {
		font-size: 28rpx;
		color: #E45825;
	}

	textarea {
		width: 100%;
		resize: none;
		margin-bottom: 16px;
		box-sizing: border-box;
		height: 800rpx;
	}

	.user-box {
		width: 130rpx;

		image {
			width: 102rpx;
			height: 102rpx;
			border-radius: 50%;
		}
	}

	.image-box {
		width: 218rpx;
		height: 218rpx;
		margin-right: 18rpx;
		margin-bottom: 18rpx;
		background-color: #EAEAEA;
		border-radius: 16rpx;

		&:nth-child(3n) {
			margin-right: 0;
		}
	}
</style>